<template>
    <div class="right-container">
        <div class="right-row1">
            <div class="pjdh">
                <div class="pjdh-title">
                    <TitleRow title="平均等候及超时占比分析" />
                </div>
                <div class="pjdh-bg">
                    <div v-for="(item,index) in waitList" :key="index" :class="`row${index+1}`" class="pjdh-row">
                        <div v-if="index>0" class="row-title left-title">{{item.type}}</div>
                        <div class="pjdh-info">
                            <div class="row-info1">平均等候分钟数</div>
                            <div class="row-info2">
                                <span class="row-info-num">{{item.waitTime}}</span>
                                <span>min</span>
                            </div>
                            <div class="row-info3">超时件占比</div>
                            <div class="row-info4">
                                <span class="row-info-num">{{item.ratio}}</span>
                                <span>%</span>
                            </div>
                        </div>

                        <div v-if="index==0" class="row-title right-title">{{item.type}}</div>
                    </div>
                    <!-- <div class="pjdh-row row2">
                        <div class="row-title left-title">统一受理</div>
                        <div class="pjdh-info">
                            <div class="row-info1">平均等候分钟数</div>
                            <div class="row-info2">
                                <span class="row-info-num">18</span>
                                <span>min</span>
                            </div>
                            <div class="row-info3">超时件占比</div>
                            <div class="row-info4">
                                <span class="row-info-num">3</span>
                                <span>%</span>
                            </div>
                        </div>
                    </div>
                    <div class="pjdh-row row3">
                        <div class="row-title left-title">统一制证</div>
                        <div class="pjdh-info">
                            <div class="row-info1">平均等候分钟数</div>
                            <div class="row-info2">
                                <span class="row-info-num">33</span>
                                <span>min</span>
                            </div>
                            <div class="row-info3">超时件占比</div>
                            <div class="row-info4">
                                <span class="row-info-num">7</span>
                                <span>%</span>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="pjdh">
                <div class="pjdh-title">
                    <TitleRow title="科室办理情况分析" />
                </div>
                <div id="ksblStat"></div>
            </div>
        </div>
        <div class="right-row2">
            <div class="ljbj">
                <TitleRow title="累计办件top5" />
                <ul class="top-ul">
                    <li v-for="(item,index) in bjTopList" :key="index" class="top-li">
                        <div class="top-num-bg">
                            <img src="../../assets/dp3/ljbj-top.png" alt="">
                            <span class="top-num">{{index+1}}</span>
                        </div>
                        <div class="top-strip">
                            <div :style="{ width: `${90-(index*10)}%` }" class="inner-strip">
                                
                            </div>
                            <div class = "inner-strip-wrapper">
                                <div class="item1">{{item.department_name}}</div>
                                <div class="item2">{{item.window_num}}号</div>
                                <div class="item2">{{item.create_user_name}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="ljbj">
                <TitleRow title="制证情况分析" />
                <div class="zzqk">
                    <div class="relative">
                        <div class="zzqk-title">统一制证</div>
                        <div class="zzqk-data">
                            <span class="zzqk-num1">{{zzObjs.tyzz}}</span>
                            <span class="zzqk-tag">件</span>
                        </div>
                        <img src="../../assets/dp3/zzqk-bg1.png" alt="">
                    </div>
                    <div class="zzqk-info">
                        <div>到期占比</div>
                        <div>
                            <span class="zzqk-info-num">{{zzObjs.dqzb}}</span>
                            <span>%</span>
                        </div>
                    </div>
                    <div class="relative">
                        <div class="zzqk-title zzqk-title2">到期数量</div>
                        <div class="zzqk-data zzqk-data2">
                            <span class="zzqk-num1">{{zzObjs.dqsl}}</span>
                            <span class="zzqk-tag">件</span>
                        </div>
                        <img src="../../assets/dp3/zzqk-bg2.png" alt="">
                    </div>
                    <div id="zzqkstat">

                    </div>
                </div>
            </div>
        </div>
        <div class="right-row3">
            <div class="zzk">
                <TitleRow title="证照库证照情况分析" />
                <div class="zzk-bg">
                    <div class="zzk-bg2">
                        {{fxObj.zzkTotal}}
                    </div>
                    <div :title = "item.name" v-for="(item,index) in zzkList" :key="index" :class="`circle${index+1}`" class="zzk-circle">
                        {{item.total}}
                        <div class="zzk-circle-text">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="zzk">
                <TitleRow title="知识库知识情况分析" />
                <div class="zzk-bg">
                    <div class="zzk-bg2 zsk-bg2">
                        {{fxObj.zskTotal}}
                    </div>
                    <div v-for="(item,index) in zskList" :key="index" :class="`circle${index+1}`" class="zzk-circle">
                        {{item.total}}
                        <div class="zzk-circle-text">{{item.keyword}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TitleRow from "./titleRow";
import { option3, zzqkStat } from "./statConfig";
import {
    getWaitAndOvertimeRatio,
    getDepartmentSituation,
    getHandleTop5,
    getMakeCardSituation,
    getCredentialsCount,
    getKnowledgeCount,
} from "../../config/api";
import Pubsub from "../../utils/pubsub";
import echarts from "echarts";
export default {
    components: {
        TitleRow
    },
    data() {
        return {
            commonRequest: {
                town: "",
                type: ""
            },
            chart1:null,
            bjTopList: [],
            waitList: [],
            zzObjs: {
                tyzz: 0,
                dqzb: "0",
                dqsl: 0
            },
            zzkList: [],
            zskList: [],
            fxObj:{
                zzkTotal:0,
                zskTotal:0
            }
        };
    },
    mounted() {
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initStat();
        this.initData();
    },
    methods: {
        /**
         * 初始化请求
         */
        initData() {
            this.getWaitAndOvertimeRatioData(); //平均等候及超时占比分析
            this.getDepartmentSituationData(); //科室办理情况分析
            this.getHandleTop5Data(); //累计办件top5
            this.getMakeCardSituationData(); //制证情况分析
            this.getCredentialsCountData(); //证照库证照情况分析
            this.getKnowledgeCountData(); //知识库知识情况分析
        },
        getKnowledgeCountData(){
            getKnowledgeCount(this.commonRequest).then((result = {})=>{
                let data = result.data || [];
                let total = 0;
                data.map(item => {
                    //计算total值
                    total += parseInt(item.total);
                });
                this.fxObj.zskTotal = total;
                this.zskList = data;
            })
        },
        getCredentialsCountData() {
            getCredentialsCount(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let total = 0;
                data.map(item => {
                    //计算total值
                    total += parseInt(item.total);
                });
                this.fxObj.zzkTotal = total;
                this.zzkList = data;
            });
        },
        getMakeCardSituationData() {
            getMakeCardSituation(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                this.zzObjs.tyzz = data[0] || 0;
                this.zzObjs.dqzb = data[2] || 0;
                this.zzObjs.dqsl = data[1] || 0;

                this.chart1 = zzqkStat(data[2] || 0,this.chart1);
            });
        },
        getHandleTop5Data() {
            getHandleTop5(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                // let max = 0;
                // data.map(item => {
                //     //计算最大值
                //     max += parseInt(item.total);
                // });
                this.bjTopList = data || [];
            });
        },
        getDepartmentSituationData() {
            getDepartmentSituation(this.commonRequest).then((result = {}) => {
                // console.log()
                let data = result.data || {};
                let x = data.xAxis || [];
                let s = data.series || [];
                let series = [];
                s.map(item => {
                    if (item.name == "办件量") {
                        series.push({
                            name: "办件量",
                            type: "line",
                            yAxisIndex: 1,
                            data: item.data
                        });
                    } else {
                        series.push({
                            name: item.name,
                            type: "bar",
                            label: {
                                normal: {
                                    // show: true,
                                    textStyle: {
                                        color: "#fff" //百分比颜色
                                    }
                                    // position: 'top',
                                    // formatter:"{c}%"
                                }
                            },
                            data: item.data
                        });
                    }
                });
                let xAxis = [
                    {
                        type: "category",
                        data: x,
                        axisPointer: {
                            type: "shadow"
                        },
                        splitLine: { show: false },
                        axisLabel: {
                            rotate: 40,
                            color: "#fff"
                        },
                        axisTick: {
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    }
                ];
                this.myChart1.setOption({
                    xAxis,
                    series
                });
            });
        },
        getWaitAndOvertimeRatioData() {
            getWaitAndOvertimeRatio(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                this.waitList = data;
            });
        },
        /**
         * 初始化echarts
         */
        initStat() {
            //科室办理情况
            this.myChart1 = echarts.init(document.getElementById("ksblStat"));
            // this.myChart2 = echarts.init(document.getElementById("zzqkstat"));
            this.myChart1.setOption(option3());
            // this.myChart2.setOption(zzqkStat());
            
        }
    }
};
</script>

<style lang="scss" scoped>
.right-container {
    width: 936px;
    box-sizing: border-box;

    .right-row1 {
        display: flex;
        margin-top: 80px;
        .pjdh {
            height: 286px;
            width: 468px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .pjdh-title {
                position: absolute;
                top: -42px;
                left: -3px;
            }
            &-bg {
                height: 260px;
                width: 356px;
                background: url("../../assets/dp3/right-pjdh-bg.png");
                position: relative;
            }
            &-row {
                height: 110px;
                width: 160px;
                position: absolute;
                display: flex;
                &.row1 {
                    top: 67px;
                }
                &.row2 {
                    top: 12px;
                    right: 0;
                }
                &.row3 {
                    bottom: 7px;
                    right: 0;
                }
                .row-title {
                    width: 30px;
                    height: 110px;
                    // position: absolute;
                    writing-mode: vertical-lr;
                    letter-spacing: 5px;
                    text-align: center;
                    line-height: 30px;
                }
                .right-title {
                    right: 0;
                }
                .left-title {
                    left: 0;
                }
            }
            &-info {
                width: 130px;
                text-align: center;
                color: #000;
                font-size: 12px;
            }
            .row-info-num {
                font-size: 16px;
                color: #00a5d5;
            }
            .row-info1 {
                line-height: 26px;
            }
            .row-info2 {
                line-height: 30px;
            }
            .row-info3 {
                line-height: 22px;
            }
            .row-info4 {
                line-height: 31px;
            }
        }
    }
    #ksblStat {
        width: 458px;
        height: 242px;
    }
}
.right-row2 {
    display: flex;
    .ljbj {
        width: 468px;
        .top-ul {
            margin-top: 5px;
            color: #00c6ff;
        }
        .top-num-bg {
            height: 40px;
            width: 40px;
            background: #042451;
            border-radius: 50%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index:999;
        }
        .top-num {
            color: #00c6ff;
            position: absolute;
            font-size: 16px;
        }
        .top-strip {
            width: 428px;
            margin-left: 12px;
            height:32px;
            position:relative;
        }
        .inner-strip {
            height: 32px;
            background: linear-gradient(to left, #02547b 98, transparent 2%);
            transition: all 0.3s ease-out;
            display: flex;
            align-items: center;
            position:absolute;
            left:20px;
            
        }
        .inner-strip-wrapper{
            display:flex;
            position: absolute;
            line-height: 32px;
            align-items: center;
            .item1 {
                width: 100px;
                margin-left: 44px;
            }
            .item2 {
                width: 55px;
            }
        }
        .top-li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
    }
    #zzqkstat {
        width: 220px;
        height: 110px;
        position: absolute;
        bottom: 0;
        // background-color: #144286;;
    }
}
.right-row3 {
    margin-top: 15px;
    display: flex;
    .zzk-bg {
        width: 468px;
        height: 106px;
        background: url("../../assets/dp3/zzk-bg.png");
        margin-top: 100px;
        position: relative;
    }
    .zzk-bg2 {
        width: 115px;
        height: 143px;
        background: url("../../assets/dp3/zzk-bg2.png");
        position: absolute;
        left: 50%;
        margin-left: -58px;
        bottom: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(251, 243, 32, 0.9);
        font-size: 20px;
        padding-bottom: 30px;
        box-sizing: border-box;
        padding-left: 7px;
        animation: move 3s linear infinite;
    }
    .zsk-bg2 {
        background: url("../../assets/dp3/zsk-bg2.png");
    }
    .zzk-circle {
        position: absolute;
        background: url("../../assets/dp3/zzk-circle.png");
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(251, 243, 32, 0.9);

        &.circle1 {
            height: 50px;
            width: 50px;
            left: 212px;
            bottom: 30px;
        }
        &.circle2 {
            height: 50px;
            width: 50px;
            right: 50px;
            bottom: 40px;
        }
        &.circle3 {
            height: 50px;
            width: 50px;
            left: 74px;
            bottom: 40px;
        }
        &.circle4 {
            width: 40px;
            height: 40px;
            left: 150px;
            bottom: 90px;
        }
        &.circle5 {
            width: 40px;
            height: 40px;
            right: 150px;
            bottom: 90px;
        }
        &-text {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            width: 80px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
            bottom: -16px;
            text-align: center;
        }
    }
}
.zzqk {
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    &-info {
        display: flex;
        height: 141px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 3px 0;
        box-sizing: border-box;
        width: 144px;
        font-size: 16px;
        color: #a7dfff;
        &-num {
            font-size: 32px;
            height: 32px;
            color: #fbf320;
            display: inline-block;
            margin-right: 5px;
        }
    }
    .zzqk-title {
        color: #a7dfff;
        position: absolute;
        left: 22px;
        top: 16px;
    }
    .zzqk-title2 {
        left: 30px;
    }
    .zzqk-data {
        color: #a7dfff;
        position: absolute;
        left: 22px;
        top: 65px;
        .zzqk-num1 {
            color: #fbf320;
            font-size: 20px;
            margin-right: 5px;
        }
        .zzqk-tag {
            font-size: 12px;
        }
    }
    .zzqk-data2 {
        right: 20px;
        text-align: right;
    }
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 6px);
    }
    100% {
        transform: translate(0, 0);
    }
}
</style>